<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="<?php echo __CSS__;?>jquery.datetimepicker_1.css"/>
		<script type="text/javascript" src="<?php echo __JS__;?>jquery-1.11.3.js"></script>
		<script type="text/javascript" src="<?php echo __JS__;?>/rem.js"></script>
		<script src="<?php echo __JS__;?>/jquery.validate.js"></script>
		<script src="<?php echo __JS__;?>/jquery.datetimepicker.full.js"></script>
	</head>
	<style type="text/css">
		p{
			margin: 0;
			padding: 0;
		}
		html,body{
			font-size: 0.14rem;
		}
		.yz-icon {  
		    display: inline-block;  
		    color: orangered;
		}  
		.tanchu{
			box-sizing: border-box;
			padding: 0.2rem 0.1rem;
		}
		input{
			width: 97%;
			height: 0.3rem;
			border-radius: 5px;
			outline: none;
			border:none;
			border: 1px solid #999;
			padding-left: 5px;
		}
		.tijiao{
			display: block;
			width: 100%;
			line-height: 0.4rem;
			text-align: center;
			background: #3DBB29;
			border-radius: 6px;
			color: #fff;
			margin-bottom: 50px;
		}
		.yanzheng{
			position: absolute;
			right: 9px;
			top: 5px;
		}
		.shuru{
			position: absolute;
			right: 9px;
			top: 5px;
			display: none;
		}
		.relative{
			position: relative;
		}
	</style>
	<body>
		<!--页面弹出框-->
		<div class="tanchu">
			<p>请填写提交信息：</p>
			<form id="registerUserForm">  
		        <div>
		        	<input type="text" id="userId" name="userId" placeholder="请填写姓名"/>
		        </div>  
		        <br/>
		        <div>
		        	<input type="text" id="datetimepicker" name="datetimepicker" placeholder="请选择预约时间"/>
		        </div>
		        <br/>
		        <div>
		        	<input type="text" id="mobile" name="mobile" placeholder="请填写联系方式"/>
		        </div>
		        <br/>
		        <div class="relative">
		        	<input type="text" id="yanzheng" name="yanzheng" placeholder="请填写验证码"/>
		        	<span class="yanzheng">点击获取验证码</span>
		        	<p class="shuru"><span>60</span>后重新获取验证码</p>
		        </div>
		        <br/>
		        <div>
		        	<input type="text" id="adrees" name="adrees" placeholder="请填写您的地址"/>
		        </div>
		        <br/>
		        <span class="tijiao">提交</span> 
			</form>  
		</div>
	</body>
	
	<script type="text/javascript">
		$('#datetimepicker').datetimepicker({
			timepicker:false,    //关闭时间选项
			step:10,
			format: "Y-m-d ", //选择日期后，文本框显示的日期格式 
		});	
		
		
		 // 验证手机号码格式  
		    jQuery.validator.addMethod("checkusermobile", function(value) {  
		    var _len = $("#mobile").val().length;  
		        if(_len != 11){  
		        return false;  
		     }  
		    return true;  
		 });  
		
		$("#registerUserForm").validate(  
        {  
            rules : {  
                    userId : {  
                        required : true,  
                        /*checkuser : true,  
                        checkuserisnumber:true,  
                        checkuserfrist:true,  
                        checkuserisfristga:true,  
                        minlength : 5,  
                        maxlength : 15,  */
                    },  
                    mobile : {  
                                required : true,  
                                number : true,  
                                checkusermobile : true
                             },
                    datetimepicker : {  
                                required : true,  
                             } ,
                    yanzheng : {  
                                required : true,  
                             }  
                             
                },  
                messages : {  
                            userId : {  
                                required : "  <span class='yz-icon'>用户名不能为空</span>",  
                                /*checkuserisnumber : "  <span class='yz-icon'>用户名不能全是数字</span>",  
                                checkuserfrist:"  <span class='yz-icon'>首位必须是字母</span>",  
                                checkuserisfristga:"  <span class='yz-icon'>首位必须是字母</span>",  
                                minlength : "  <span class='yz-icon'>用户名长度最少为5个字符</span>",  
                                maxlength : "  <span class='yz-icon'>用户名长度最大为15个字符</span>",  
                                    checkuser : "  <span class='yz-icon'>用户名格式不正确</span>"   */
                            },  
                            mobile : {  
                                required : "  <span class='yz-icon'>手机号码不能为空</span>",  
                                number : "  <span class='yz-icon'>手机号码只能为数字</span>",  
                                checkusermobile : "  <span class='yz-icon'>手机号码格式不正确</span>"  
                            }  ,
                            datetimepicker : {  
                                required : "  <span class='yz-icon'>预约时间不能为空</span>",  
                            },
                            yanzheng : {  
                                required : "  <span class='yz-icon'>验证码不能为空</span>",  
                            }
                            
            }  
});  
$(".tijiao").on("click",function(){
	$("#registerUserForm").valid();
})
$(".yanzheng").on("click",function(){
		$(this).css("display","none");
		$(".shuru").css("display","block");
		setInterval("myInterval()",1000);//1000为1秒钟
       	
})
function myInterval(){
	$(".shuru").find("span").html($(".shuru").find("span").html()-1);
	if($(".shuru").find("span").html()==50){
		$(".yanzheng").css("display","block");
		$(".shuru").css("display","none");
	}
}
	</script>
</html>